<template>
  <a-modal
    title="素材列表"
    :width="1000"
    :confirm-loading="modalLoading"
    :mask-closable="false"
    v-model="visible"
    @ok="handleOk"
  >
    <div class="checked">
      <div class="let">已选择：</div>
      <div class="rig">
        <template v-if="chckedList.length">
          <a-tag v-for="(item, index) of chckedList" :key="index" color="green" closable @close="close(index)">
            {{ item.material_name }}
          </a-tag>
        </template>
        <p v-else>请选择</p>
      </div>
    </div>

    <a-table
      size="default"
      :columns="columns"
      :data-source="list"
      :row-key="record => record.id"
      :pagination="{
        total: this.total,
        pageSize: this.pageSize,
        showSizeChanger: false,
        onChange: this.tablePageChange
      }"
    >
      <span slot="mainTitle" slot-scope="text, record">
        {{ record.info_json.mainTitle }}
      </span>

      <span slot="subTitle" slot-scope="text, record">
        {{ record.info_json.subTitle }}
      </span>

      <span slot="sellingTagMulti" slot-scope="text, record">
        {{ getSellingTagMulti(record.info_json.sellingTagMulti) }}
      </span>

      <span slot="actionPoint" slot-scope="text, record">
        {{ record.info_json.actionPoint || '' }}
      </span>

      <span slot="action" slot-scope="text, record">
        <a-button v-show="showBtn(record)" type="link" size="small" @click="handleItem('select', record)"
          >选择</a-button
        >
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import { listMarketingMaterial } from '@/api/marketing/alipayPromotion'
const columns = [
  {
    title: 'ID',
    dataIndex: 'material_id',
    width: 150
  },
  {
    title: '素材名称',
    dataIndex: 'material_name'
  },

  {
    title: '主标题',
    scopedSlots: {
      customRender: 'mainTitle'
    }
  },
  {
    title: '副标题',
    scopedSlots: {
      customRender: 'subTitle'
    }
  },
  {
    title: '推荐标签',
    scopedSlots: {
      customRender: 'sellingTagMulti'
    }
  },
  {
    title: '行动点',
    scopedSlots: {
      customRender: 'actionPoint'
    }
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action'
    },
    width: 100
  }
]
export default {
  props: {
    key: {
      type: String,
      default: 'material_id'
    },

    id: {
      type: Number,
      default: undefined
    }
  },

  data() {
    return {
      chckedList: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      columns,
      list: [],
      modalLoading: false,
      visible: false
    }
  },

  watch: {
    id(e) {
      if (e) {
        this.getList()
      }
    }
  },

  computed: {
    showBtn() {
      return item => {
        let { chckedList, key } = this,
          _item = chckedList.find(el => el[key] === item[key])
        return !_item
      }
    },

    getSellingTagMulti() {
      return info => {
        if (Array.isArray(info)) return info.join('/')
        return info
      }
    }
  },

  methods: {
    handleOk() {
      this.$emit('select', this.chckedList)
      this.visible = false
    },

    close(index) {
      this.chckedList.splice(index, 1)
    },

    // 获取数据列表
    async getList(page_num = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { pageSize: page_size, id } = this

      const res = await listMarketingMaterial({
        id,
        page_size: String(page_size),
        page_num: String(page_num)
      })

      if (!res.code) {
        let { total } = res.data,
          list = res.data || []

        if (list && list.length) {
          list = list.map(el => {
            if (el.info_json) {
              el.info_json = JSON.parse(el.info_json)
            }

            return el
          })
        }
        this.total = total
        this.list = list || []
      }
      hide()
    },

    // 分页请求
    tablePageChange(e) {
      this.getList(e)
    },

    // 点击单个
    handleItem(type, item) {
      switch (type) {
        case 'select':
          this.chckedList.push(item)
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
.checked {
  padding-bottom: 20px;
  display: flex;

  .rig {
    flex: 1;
    overflow: hidden;
  }
}
</style>
